@primary_color: #2fb0ff;
@normal_color: white;
@border_style: 1px solid rgba(255, 255, 255, 0.1);
@panel_shadow: 0px 30px 4px 0px rgba(0, 0, 0, 0.5), 0px -2px 4px 0px rgba(255, 255, 255, 0.3);
@foreground-color: rgba(255, 255, 255, 0.8);
@background-color: transparent;
@selected-color: #2fb0ff;

@hover_background: rgba(0, 0, 0, 0.3);

.side-panel {
  position: absolute;
  width: 392px;
  &-title {
    height: 40px;
    line-height: 40px;
    padding-left: 8px;
    background: url('../images/title_bg.png');
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
  }
  &-body {
    background-image: url('../images/bg.png');
    border: 1px solid rgba(#ffffff, 0.1);
    border-bottom: 0;
    color: #ffffff;
  }
  &-after {
    position: relative;
    height: 24px;
    background-image: url('../images/bottom.png');
    background-repeat: no-repeat;

    &:after {
      position: absolute;
      right: -9px;
      top: 13px;
      content: '';
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-right: 10px solid #2fb0ff;
      transform: rotateZ(-135deg);
    }
  }
}

// 新设计的侧边栏
.side-panel2 {
  position: absolute;
  width: 370px;
  &-title {
    position: relative;
    height: 48px;
    line-height: 48px;
    padding-left: 8px;
    // background: url('../images/标题_1.png');
    background: linear-gradient(270deg, rgba(#202f37, 0.65) 0%, rgba(#1e272d, 0.65) 100%);
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    padding-left: 48px;
    &::before {
      position: absolute;
      left: 16px;
      top: 8px;
      content: url('../images/标题.png');
    }
    a {
      margin-right: 42px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.5);
      font-weight: 300;
    }
  }
  &-body {
    background: linear-gradient(135deg, rgba(#131b20, 0.85) 0%, rgba(#091218, 0.85) 100%);
    // border: 1px solid rgba(61, 251, 255, 0.2);
    border-bottom: 0;
    color: #ffffff;
    padding-bottom: 24px;
  }
  &-subtitle {
    line-height: 24px;
    height: 24px;
    font-size: 16px;
    font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
    font-weight: 500;
    color: #ffffff;
    line-height: 24px;

    padding-left: 8px;
    margin-bottom: 8px;
    &::before {
      content: url('../images/副标题.png');
      margin-right: 8px;
      display: inline-block;
      vertical-align: text-top;
    }
  }
}
